<template>

	<div>
    <!--<p>{{message}}</p>-->
    <div class="login">
      <ul>
        <li><img src="../assets/手机.png" alt=""><input type="text" placeholder="请输入您的手机号" v-model="loginNum"></li>
        <li style="overflow: hidden;"><img src="../assets/密码.png" alt=""><input type="password" placeholder="请输入验证码" v-model="pwdNum" style="width: 10rem;"><button @click="getNum()" v-show="show" style="float: right;position: relative;top: 1rem;right: 0.5rem">免费获取验证码</button><span v-show="!show">{{count}}s后重新获取</span></li>
      </ul>
    </div>

    <div class="loginBtn">
      <button @click="loginClick()">登录</button>
    </div>

    <div class="tishiWrap" v-show="tishikuang">
      <p>{{warnMessage}}</p>
    </div>
  </div>
</template>

<script>

  import $ from 'jquery'
  import axios from 'axios'
	export default {
     name:'nine',
     data() {
        return {
          loginNum:'',
          pwdNum:'',
          tishikuang:false,
          warnMessage:'',
          time:1500,
          count:'',
          show:true,
          timer: null,
        }
       },
     methods: {
       getNum() {
         const TIME_COUNT = 60;
         if (!this.timer) {
           var that = this
           if(that.loginNum=='') {
             that.tishikuang = true;
             that.warnMessage = '手机号码不能为空！';
             // this.tishikuang=false
             window.setTimeout(function() {
               that.tishikuang = false
             }, this.time);
           }else {
             axios.post('http://test.zjapi.xianxiangle.com/send_sms_code',{
               user_phone: this.loginNum,
               action:'login'
             }).then(function (res) {
               console.log(res.data);
               console.log(res.data.message);
               that.tishikuang = true;
               that.warnMessage =res.data.message;
               // this.tishikuang=false
               window.setTimeout(function() {
                 that.tishikuang = false
               }, that.time);
             }).catch(function () {

             })
           this.count = TIME_COUNT;
           this.show = false;
           this.timer = setInterval(() => {
             if (this.count > 0 && this.count <= TIME_COUNT) {
               this.count--;
             } else {
               this.show = true;
               clearInterval(this.timer);
               this.timer = null;
             }
           }, 1000)
         }

         }
       },
       loginClick(){
           var _that = this
           if(_that.loginNum==''||_that.pwdNum=='') {
             _that.tishikuang = true;
             _that.warnMessage = '请填写完整信息！';
             // this.tishikuang=false
             window.setTimeout(function() {
               _that.tishikuang = false
             }, _that.time);
           }else {
             axios.post('http://test.zjapi.xianxiangle.com/login_code',{
               user_phone: this.loginNum,
               verify_code:this.pwdNum
             }).then(function (res) {
                 console.log(res)
               if(res.data.code==0){
                 // console.log(res.data.data.AuthToken);
                 _that.AuthToken=res.data.data.AuthToken;
                 console.log( _that.AuthToken)
                 sessionStorage.setItem('AuthToken', _that.AuthToken);
                 _that.tishikuang = true;
                 _that.warnMessage =res.data.message;
                 window.setTimeout(function() {
                   _that.$router.push({path:'/first'})
                 }, _that.time);
               }
                 // _that.tishikuang = true;
                 // _that.warnMessage =res.data.message;
                 // // this.tishikuang=false
                 // window.setTimeout(function() {
                 //   _that.tishikuang = false
                 // }, this.time);

             }).catch(function () {

             })
           }
       }
     },
//   components: {
//     AppHeader
//   }
	}
</script>

<style lang="scss" scoped>
  .login{
    width: 100%;
    height: auto;
    margin: auto;
    ul{
      width: 90%;
      list-style: none;
      li{
        height: 5rem;
        line-height: 5rem;
        border-bottom:1px solid #cccccc ;
        text-align: left;
        input{
          width: auto;
          height: 4rem;
          line-height: 4rem;
          outline: none;
          border: 0;
          margin-left: 1rem;
        }
        img{
          width: 2.6rem;
          height: 2.6rem;
          position: relative;
          top: 0.8rem;
        }
        button{
          width:auto;
          height: 3rem;
          /*border: 1px solid;*/
          border: 0;
          outline: none;
          text-align: center;
          font-size: 1.3rem;
          color:#32D69C ;
          background: white;
          margin-left: 1rem;
        }
        span{
          display: inline-block;
          color:#32D69C ;
          text-align: center;
          font-size: 1.6rem;
        }
      }
    }
  }
  .loginBtn{
    width: 100%;
    text-align: center;
    height: auto;
    margin-top: 2rem;
    button{
      width: 90%;
      height: 4rem;
      line-height: 4rem;
      text-align: center;
      font-size: 1.6rem;
      background: #32D69C;
      border-radius: 0.5rem;
      font-weight: 300;
      outline: none;
      border: 0;
      font-family: PingFangSC-Regular;
      color: #FFFFFF;
      letter-spacing: 0;
    }
  }

  .tishiWrap {
    width: 70%;
    background:rgba(0,0,0,0.4);
    /*display: none;*/
    height: 4rem;
    line-height:4rem;
    border: 1px solid #cccccc;
    color: white;
    text-align: center;
    border-radius: 3rem;
    font-size: 2rem;
    margin: auto;
    margin-top: 1rem;
  }
</style>
